<template>
    <div id="app">
        <Meta pagealias="freelancesubjectshow" />
        <Head>项目详情</Head>
        <div class="center">
            <div class="name">{{info.title}}</div>
            <div class="info">
                <div class="box">
                    <div class="money">￥{{info.price}}</div>
                    <div>预算价格</div>
                </div>
                <div class="box day">
                    <div class="day">{{info.period}}</div>
                    <div>预计工期</div>
                </div>
                <div class="box">
                    <div class="date">{{info.endtime}}</div>
                    <div>接单截止</div>
                </div>
            </div>
            <div class="title">项目需求</div>
            <div class="claim">
                {{info.desc}}
            </div>
            <div class="hr"></div>
            <div class="title">联系方式</div>
            <div class="contactname">联系人：{{info.linkman}}</div>
            <div class="contactdiv" v-if="info.show">
                <div class="contactphone" v-if="info.mobile">{{info.mobile}}</div>
                <div class="contactwechat" v-if="info.weixin">{{info.weixin}}</div>
            </div>
            <div class="contactbtn" @click="contactHim">联系TA</div>
            <div class="copybtn" @click="copyWechat">复制微信号</div>
        </div>
        <van-popup v-model="showPayment" closeable position="bottom">
            <PopupPayment
                :amount="lookmoney"
                @handlerSubmit="handlerSubmit"
            ></PopupPayment>
        </van-popup>
        <PaySubmit ref="paySubmit" :payment="paymoth" :success-url="'/freelance/project/'+proid"></PaySubmit>
        <van-popup
          v-model="showLogin"
          position="right"
          :overlay="false"
          style="width:100%;height:100%"
        >
          <Login
            :utype="2"
            :single_login="true"
            @afterLogin="afterLogin"
            :after_login_data="after_login_data"
            :goback_custom="true"
            @gobackCustomMethod="closeLogin"
          ></Login>
        </van-popup>
    </div>
</template>
<script>
import Login from '@/components/Login'
import PaySubmit from '@/components/service/PaySubmit'
import PopupPayment from '@/components/service/PopupPayment'
import http from '@/utils/http'
import api from '@/api'
export default {
  components: {
    Login,
    PaySubmit,
    PopupPayment
  },
  data () {
    return {
      proid: '',
      info: {},
      lookmoney: 0,
      paymoth: 'wxpay',
      showPayment: false,
      showLogin: false,
      is_personal_login: false,
      after_login_data: {}
    }
  },
  created () {
    this.is_personal_login = this.$store.state.LoginOrNot === true && this.$store.state.LoginType === 2
    this.lookmoney = this.$store.state.config.freelance_view_subject_fee
    this.proid = this.$route.params.id
    // 请求数据
    this.fetchData()
  },
  methods: {
    onLoad () {
    },
    fetchData () {
      const params = {
        id: this.proid
      }
      http.get(api.show_subject, params)
        .then(res => {
          this.info = res.data
        }).catch(() => {})
    },
    contactHim () {
      if (this.info.show) {
        location.href = `tel:${this.info.mobile}`
      } else {
        if (this.is_personal_login === false) {
          this.$dialog
            .confirm({
              title: '提示',
              message: '当前操作需要登录账号',
              confirmButtonText: '去登录'
            })
            .then(() => {
              this.showLogin = true
              this.after_login_data = {
                method: 'contactHim'
              }
            })
            .catch(() => {})
        } else {
          this.showPayment = true
        }
      }
    },
    copyWechat () {
      if (this.info.show) {
        var oInput = document.createElement('input')
        oInput.value = this.info.weixin
        document.body.appendChild(oInput)
        oInput.select() // 选择对象
        document.execCommand('Copy') // 执行浏览器复制命令
        oInput.className = 'oInput'
        oInput.style.display = 'none'
        this.$toast('复制成功')
      } else {
        if (this.is_personal_login === false) {
          this.$dialog
            .confirm({
              title: '提示',
              message: '当前操作需要登录账号',
              confirmButtonText: '去登录'
            })
            .then(() => {
              this.showLogin = true
              this.after_login_data = {
                method: 'copyWechat'
              }
            })
            .catch(() => {})
        } else {
          this.showPayment = true
        }
      }
    },
    handlerSubmit (payment) {
      this.paymoth = payment
      this.$refs.paySubmit.handlerSubmit(api.order_pay, {
        id: this.proid,
        order_type: 4,
        pay_type: this.paymoth,
        redirect_url: this.$store.state.config.mobile_domain + 'freelance/project/' + this.proid
      })
    },
    afterLogin (data) {
      this.showLogin = false
      this.is_personal_login = true
      let method = null
      if (data.method !== undefined) {
        method = data.method
      }
      this.fetchData(method)
    },
    closeLogin () {
      this.showLogin = false
    }
  }
}
</script>
<style lang="scss" scoped>
.center{
    height: calc(100vh - 53px);
    overflow: auto;
    .name{
        font-weight: bold;
        margin: 15px 19px 0 19px;
        line-height: 1.3;
        font-size: 21px;
        color: #444444;
    }
    .info{
        margin: 28px 19px 0 19px;
        display: flex;
        font-size: 15px;
        color: #bdbdbd;
        box-shadow: 0px 0px 7px rgba($color: #cccccc, $alpha: 0.7);
        padding-top: 28px;
        padding-bottom: 31px;
        .box{
            flex: 1;
            text-align: center;
            line-height: 1;
            &.day{
                border-left: 1px dashed #d5d5d5;
                border-right: 1px dashed #d5d5d5;
            }
            .money{
                font-size: 17px;
                margin-bottom: 16px;
                color: #ff4e00;
            }
            .day,.date{
                color: #555555;
                margin-bottom: 16px;
            }
        }
    }
    .title{
        margin-left: 19px;
        margin-top: 38px;
        line-height: 1;
        font-size: 20px;
        color: #444444;
        font-weight: bold;
    }
    .claim{
        margin: 26px 19px 0px 19px;
        font-size: 15px;
        color: #555555;
        line-height: 1.8;
        word-break: break-all;
    }
    .hr{
        margin: 34px 18px 0px 18px;
        height: 1px;
        background-color: #ecedf2;
    }
    .contactname{
        line-height: 1;
        margin: 24px 19px 0px 19px;
        font-size: 15px;
        color: #555555;
    }
    .contactdiv{
        margin: 18px 19px 0px 19px;
        display: flex;
        .contactphone{
            line-height: 1;
            font-size: 15px;
            color: #555555;
            background: url('../../assets/freelance/images/updinfo_12.png') 0 center no-repeat;
            background-size: 11px 14px;
            padding-left: 18px;
        }
        .contactwechat{
            line-height: 1;
            font-size: 15px;
            color: #555555;
            background: url('../../assets/freelance/images/updinfo_14.png') 0 center no-repeat;
            background-size: 15px 12px;
            padding-left: 22px;
            margin-left: 38px;
        }
    }
    .contactbtn{
        margin-top: 34px;
        margin-left: 21px;
        width: calc(100vw - 42px);
        height: 47px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #000000;
        border-radius: 50px;
        background-color: #fed700;
        border: 1px solid #fed700;
        box-shadow: 0px 1px 7px rgba($color: #fed700, $alpha: 0.8);
    }
    .copybtn{
        margin-top: 17px;
        margin-left: 21px;
        margin-bottom: 30px;
        width: calc(100vw - 42px);
        height: 47px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #a59e78;
        border-radius: 50px;
        background-color: #ffffff;
        border: 1px solid #fed700;
        background: url('../../assets/freelance/images/weixin_07.png') calc((100vw - 42px) / 2 - 70px) center no-repeat;
        background-size: 23px 19px;
        padding-left: 36px;
    }
}
.center::-webkit-scrollbar{
    display: none;
}
</style>
